<template>
  <div class="map">
    <avue-crud :option="option"
               v-model="form"
               @row-save="rowSave"
               @row-update="rowUpdate"
               @row-del="rowDel"
               :before-open="beforeOpen"
               :data="data">
      <template slot="menu" slot-scope="scope">
        <el-button :size="scope.size" :type="scope.type" icon="el-icon-menu" @click="addChildren(scope.row.id)">添加子分类</el-button>
      </template>
    </avue-crud>
    <el-dialog title="添加子分类" :visible.sync="dialogFormVisible">
      <el-form :model="addform">
        <el-form-item label="分类ID" :label-width="formLabelWidth">
          <el-input v-model="addform.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="addform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="addform.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="yes">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getObj, queryTree, update, save, remove } from '@/api/category'
export default {
  data () {
    return {
      dialogFormVisible:false,
      form: {},
      data: [],
      option: {
        index: true,
        align: 'center',
        headerAlign: 'center',
        column: [
          {
            label: 'ID',
            prop: 'id',
            rules: [{
              required: true,
              message: "请输入分类ID",
              trigger: "blur"
            }]
          },
          {
            label: '名称',
            prop: 'name',
            rules: [{
              required: true,
              message: "请输入名称",
              trigger: "blur"
            }]
          },
          {
            label: '描述',
            prop: 'description',
            rules: [{
              message: "请输入描述",
              trigger: "blur"
            }]
          }
        ]
      },
      addform: {
        name: '',
        id: '',
        description: '',
      },
      formLabelWidth: '120px',
      parentId: ''
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // vaildData (id) {
    //   return [0, 1].includes(id)
    // },
    beforeOpen (done, type) {
      if (type == 'edit') {
        getObj(this.form.id).then(res => {
          const data = res.data.data;
          this.form = data
          done()
        })
      } else {
        done()
      }
    },
    rowDel (row) {
      // if (this.vaildData(index)) {
      //   this.$message.error('例子模板不允许修改')
      //   return false;
      // }
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(row.id).then(() => {
          this.$message.success('删除成功');
          this.getList()
        })
      }).catch(() => {

      });

    },
    rowUpdate (row, index, done) {
      // if (this.vaildData(index)) {
      //   this.$message.error('例子模板不允许修改')
      //   return false;
      // }
      update(row).then(() => {
        this.$message.success('修改成功');
        this.getList()
        done();
      })
    },
    rowSave (row, done) {
      save(row).then(() => {
        this.$message.success('新增成功');
        this.getList()
        done();
      })
    },
    addChildren(id){
      this.parentId = id
      this.dialogFormVisible = true
    },
    yes(){
      let params = {
        ...this.addform,
        parentId: this.parentId
      }
      save(params).then(() => {
        this.$message.success('新增成功');
        this.getList()
        this.dialogFormVisible = false
        this.addform = {}
        this.parentId = ''
      })
    },
    getList () {
      queryTree({}).then(res => {
        const data = res.data.result;
        this.data = data;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  padding: 30px;
  width: 100%;
  .title {
    display: block;
    margin-bottom: 30px;
    padding: 0 50px;
    font-size: 20px;
  }
}
</style>
